<!-- TopNav.vue -->
<template>
    <div class="top-nav">
        <!-- 左侧返回 -->
        <div v-if="showBack"  class="nav-left" @click="handleBack">
            <img class="back-icon" src="@/assets/icons/back.png" alt="返回" />
        </div>

        <!-- 中间标题 -->
        <div class="nav-title">{{ title }}</div>

        <!-- 右侧操作 -->
        <div v-if="showAdd" class="nav-right" @click="handleRightClick">
            <img class="plus-icon" src="@/assets/icons/plus.png" alt="加号" />
            <span>{{ rightText }}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TopNav",
        props: {
            title: { type: String, default: "" }, // 中间标题
            rightText: { type: String, default: "" }, // 右侧文字
            rightParams: { type: Object, default: () => ({}) }, // 点击右侧回调参数
            showBack: {
                type: Boolean,
                default: true,
            },
            showAdd: {
                type: Boolean,
                default: false,
            },
        },
        methods: {
            handleBack() {
                this.$emit("back"); // 父组件可监听 back 事件
                this.$router.back(); // 默认返回上一页
            },
            handleRightClick() {
                this.$emit("rightClick", this.rightParams);
            }
        }
    };
</script>

<style scoped>

    /* 顶部导航栏 */
    .top-nav {
        position: relative; /* 相对定位，让左右按钮绝对定位 */
        height: 50px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid #e0e0e0;
    }

    /* 左边返回 */
    .nav-left {
        position: absolute;
        left: 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    .back-icon {
        width: 22px;
        height: 22px;
    }


    /* 中间标题 */
    .nav-title {
        font-size: 16px;
        text-align: center;
    }

    /* 右边添加投诉 */
    .nav-right {
        position: absolute;
        right: 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        font-size: 14px;
    }

    .plus-icon {
        width: 22px;
        height: 22px;
        margin-right: 2px;
    }



</style>
